<template>
	<view class="page">
		<view class="searchVue">
			<view class="status"></view>
			<view class="flex align-center padding-row30">
				<image src="../../static/back.png" style="width: 20rpx; height: 34rpx;" @click="$tools.back()"></image>
				<view class="search flex align-center relative">
					<input type="text" placeholder="请输入搜索商品的名称..." v-model="key"/>
					<image src="../../static/search.png" style="width: 38rpx; height: 38rpx; left: 50rpx;" class="absolute-middle"></image>
					<view class="btn" @click="searchFun()">搜索</view>
				</view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scrollVue" @scrolltolower="onReachBot">
			<view class="w100 flex-between flex-wrap">
				<view class="product" v-for="(item, index) in list" :key="index" @click="navigate(`./productDetail_${item.parentCategoryId}`, item.id)">
					<view class="picture">
						<image :src="item.picUrl" style="width: 100%; height: 100%; border-radius: 20rpx 20rpx 0 0;"></image>
					</view>
					<view class="info flex-column flex-between">
						<view class="name line-1">{{item.name}}</view>
						<view class="flex align-center">
							<text class="newPrice">￥{{item.price/100}}</text>
							<text class="oldPrice">￥{{item.marketPrice/100}}</text>
						</view>
						<view class="sold">已售：{{item.salesCount}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<empty text="未搜索到有关商品" v-if="isEmpty"></empty>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				list: [],
				pageNum: 1,
				pageSize: 20,
				pages: 0,
				key: "",
				isEmpty: false,
			}
		},
		methods: {
			async searchFun(){
				this.list = []
				this.pageNum = 1
				await this.getList()
			},
			
			// 登录校验跳转
			navigate(path, value){
				if(!this.$store.state.isLogin) return this.$tools.route("../login/login")
				uni.navigateTo({
					url: path + "?value=" + value
				})
			},
			
			// 分页刷新
			async onReachBot(){
				if(this.pageNum===this.pages) return
				this.pageNum ++
				await this.getList()
			},
			
			async getList(){
				const result = await this.$request("/app-api/product/spu/page", "GET", {
					pageNo: this.pageNum,
					pageSize: this.pageSize,
					keyword: this.key
				})
				if(result.code===0) {
					this.list = this.list.concat(result.data.list)
					this.pages = Math.ceil(result.data.total/this.pageSize)
					this.isEmpty = this.list.length===0
					console.log("总页数", this.pages)
					console.log("商品列表", this.list)
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.scrollVue {
		width: 100%;
		height: calc(100vh - 100rpx - var(--status-bar-height));
		padding: 20rpx 30rpx 0;
		box-sizing: border-box;
		.product {
			width: 330rpx;
			height: 480rpx;
			margin-bottom: 26rpx;
			background: #fff;
			border-radius: 20rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
			.picture {
				width: 330rpx;
				height: 330rpx;
				border-radius: 20rpx 20rpx 0 0;
			}
			.info {
				width: 100%;
				height: 150rpx;
				padding: 15rpx;
				.name {
					color: #333;
					font-weight: 600;
					line-height: 1;
					font-size: 26rpx;
				}
				.newPrice {
					color: #1CC289;
					font-weight: 600;
					line-height: 1;
					font-size: 26rpx
				}
				.oldPrice {
					color: #666;
					text-decoration: line-through;
					line-height: 1;
					padding-left: 20rpx;
					font-size: 26rpx
				}
				.sold {
					color: #4B5563;
					line-height: 1;
					font-size: 24rpx
				}
			}
		}
	}
	.searchVue {
		width: 100%;
		.search {
			width: 100%;
			height: 100rpx;
			padding-left: 30rpx;
			input {
				flex: 1;
				height: 72rpx;
				background: #f5f5f5;
				border-radius: 15rpx;
				background: #f5f5f5;
				font-size: 28rpx;
				color: #333;
				padding-left: 64rpx;
			}
			.btn {
				width: 120rpx;
				height: 72rpx;
				background: linear-gradient(to right, #1CC289, #60A5FA);
				border-radius: 18rpx;
				line-height: 72rpx;
				text-align: center;
				color: #fff;
				margin-left: 20rpx;
			}
		}
	}
</style>